<template>
  <div>
    <input v-model="newTodo" @keyup.enter="emit('add-todo', newTodo)" placeholder="添加新的待办事项..." />
    <button @click="emit('add-todo', newTodo)">添加</button>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue';

const newTodo = ref('');
const emit = defineEmits(['add-todo']);
</script>

<style scoped>
input {
  width: calc(100% - 110px);
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #28a745;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

button:active {
  background-color: #1e7e34;
}
</style>